<template>
    <div>
        <div class="common-layout" style="height: 100%;">
            <el-container style="height: 100%;">
                <el-header style="background-color: #1E90FF;height: 40px;color:#fff">
                    <div style="text-align: right;">

                    </div>
                    <div style="text-align: left; font-size: 20px;">
                        <h3>管伊佳ERP</h3>
                    </div>
                </el-header>
                <el-container>
                    <el-aside width="300px">
                        <el-row class="tac">
                            <el-col :span="12">

                                <el-link type="primary" style="margin-left: 10px;margin-top: 20px;">
                                    <el-icon>
                                        <House />
                                    </el-icon>首页</el-link>
                                <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen"
                                    @close="handleClose" router>
                                    <el-sub-menu index="1">
                                        <template #title>
                                            <el-icon>
                                                <Present />
                                            </el-icon>
                                            <span>零售管理</span>
                                        </template>
                                        <el-menu-item-group title="Group One">
                                            <el-menu-item index="1-1">item one</el-menu-item>
                                            <el-menu-item index="1-2">item two</el-menu-item>
                                        </el-menu-item-group>
                                        <el-menu-item-group title="Group Two">
                                            <el-menu-item index="1-3">item three</el-menu-item>
                                        </el-menu-item-group>
                                        <el-sub-menu index="1-4">
                                            <template #title>item four</template>
                                            <el-menu-item index="1-4-1">item one</el-menu-item>
                                        </el-sub-menu>
                                    </el-sub-menu>
                                    <el-sub-menu index="2">
                                        <template #title>
                                            <el-icon>
                                                <Crop />
                                            </el-icon>
                                            <span>采购管理</span>
                                           
                                            

                                        </template>
                                        <el-menu-item index="/BuyingRequisition">
                                            <el-icon><icon-menu /></el-icon>
                                            <span>请购单</span>
                                            </el-menu-item>
                                            <el-menu-item index="/BuyList">
                                            <el-icon><icon-menu /></el-icon>
                                            <span>采购订单</span>
                                            </el-menu-item>
                                            <el-menu-item index="/BuyEnter">
                                            <el-icon><icon-menu /></el-icon>
                                            <span>采购入库</span>
                                            </el-menu-item>
                                            <el-menu-item index="/BuyReturn">
                                            <el-icon><icon-menu /></el-icon>
                                            <span>采购出库</span>
                                            </el-menu-item>
                                    </el-sub-menu>
                                    <el-sub-menu index="3">
                                        <template #title>
                                            <el-icon>
                                                <ShoppingTrolley />
                                            </el-icon>
                                            <span>销售管理</span>
                                        </template>
                                    </el-sub-menu>
                                    <el-sub-menu index="4">
                                        <template #title>
                                            <el-icon>
                                                <Memo />
                                            </el-icon>
                                            <span>仓库管理</span>
                                        </template>
                                    </el-sub-menu>
                                    <el-sub-menu index="5">
                                        <template #title>
                                            <el-icon>
                                                <Notebook />
                                            </el-icon>
                                            <span>财务管理</span>
                                        </template>
                                    </el-sub-menu>
                                    <el-sub-menu index="6">
                                        <template #title>
                                            <el-icon>
                                                <Clock />
                                            </el-icon>
                                            <span>报表查询</span>
                                        </template>
                                    </el-sub-menu>
                                    <el-sub-menu index="7">
                                        <template #title>
                                            <el-icon>
                                                <Handbag />
                                            </el-icon>
                                            <span>商品管理</span>
                                        </template>
                                        <el-menu-item index="/GoodType">
                                            <el-icon><icon-menu /></el-icon>
                                            <span>商品类别</span>
                                            </el-menu-item>
                                            <el-menu-item index="/GoodList">
                                            <el-icon><icon-menu /></el-icon>
                                            <span>商品信息</span>
                                            </el-menu-item>
                                    </el-sub-menu>
                                    <el-sub-menu index="8">
                                        <template #title>
                                            <el-icon>
                                                <Postcard />
                                            </el-icon>
                                            <span>基本资料</span>
                                          

                                        </template>
                                        <el-menu-item index="/SuppliercustomerList">
                                            <el-icon><icon-menu /></el-icon>
                                            <span>供应商信息</span>
                                            </el-menu-item>
                                        </el-sub-menu>
                                    <el-sub-menu index="9">
                                        <template #title>
                                            <el-icon>
                                                <Setting />
                                            </el-icon>
                                            <span>系统管理</span>
                                        </template>
                                    </el-sub-menu>
                                </el-menu>
                            </el-col>
                        </el-row>
                    </el-aside>
                    <el-main>
                        <RouterView />
                    </el-main>
                </el-container>
            </el-container>
        </div>
    </div>
</template>

<script setup lang="ts">

import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
</script>

<!-- <style scoped>
.el-header{
    background-color: gray;
    height: 60px;
    line-height: 60px;
    color: white;
}
.el-aside{
    background: gray;
    height: calc(1000vh - 60px);
}
 
</style> -->
 <style>
span {
    margin-right: 10px;
}
</style> 